<mat-card>
  <mat-card-content>

    <div class="col-12" *ngIf="!sqlIte">

      <h3 class="fw-bold">Not Available</h3>

      <p>
        In order to use Machine Learning and AI with Magic, you'll need to use SQLite as your primary database.
      </p>

    </div>

    <mat-tab-group
      *ngIf="sqlIte"
      mat-stretch-tabs
      dynamicHeight
      animationDuration="0ms"
      #tabs>

      <!-- Training data types -->
      <mat-tab>

        <ng-template mat-tab-label>
          Types
        </ng-template>

        <ng-template matTabContent>

          <app-machine-learning-models
            [(isConfigured)]="isConfigured"
            (trainModel)="trainModel($event)">
          </app-machine-learning-models>

        </ng-template>

      </mat-tab>

      <!-- Training snippets -->
      <mat-tab [disabled]="!isConfigured">

        <ng-template mat-tab-label>
          Training data
        </ng-template>

        <ng-template matTabContent>

          <app-machine-learning-training-data>
          </app-machine-learning-training-data>

        </ng-template>

      </mat-tab>

      <!-- History -->
      <mat-tab [disabled]="!isConfigured">

        <ng-template mat-tab-label>
          History
        </ng-template>

        <ng-template matTabContent>

          <app-machine-learning-history>
          </app-machine-learning-history>

        </ng-template>

      </mat-tab>

      <!-- Questionnaires -->
      <mat-tab [disabled]="!isConfigured">

        <ng-template mat-tab-label>
          Questionnaires
        </ng-template>

        <ng-template matTabContent>

          <app-machine-learning-questionnaires>
          </app-machine-learning-questionnaires>

        </ng-template>

      </mat-tab>

    </mat-tab-group>

  </mat-card-content>
</mat-card>
